<template>
	<view class="navbar">
		<!--
		 属性说明
		 属性名	类型	默认值	说明
		 title	String	-	标题文字
		 left-text	String	-	右侧按钮文本
		 right-text	String	-	右侧按钮文本
		 left-icon	String	-	左侧按钮图标（图标类型参考 Icon 图标 type 属性）
		 right-icon	String	-	右侧按钮图标（图标类型参考 Icon 图标 type 属性）
		 fixed	Boolean	false	是否固定顶部
		 status-bar	Boolean	false	是否包含状态栏，
		 shadow	Boolean	true	导航栏下是否有阴影
		 color	String	#000000	图标和文字颜色
		 background-color	String	#FFFFFF	导航栏背景颜色(支持渐变色)
		 -->
		 <!-- 
		  插槽说明
		  开发者使用 NavBar 时，支持向 NavBar 里插入不同内容，以达到自定义的目的。
		  
		  slot名	说明
		  left	向导航栏左侧插入
		  right	向导航栏右侧插入
		  default	向导航栏中间插入
		  <uni-nav-bar>
			  <view>标题栏</view>
			  <view slot="left">left</view>
			  <view slot="right">right</view>
		  </uni-nav-bar>
		  -->
		<!-- 注意 使用透明的page的css背景颜色一定要和导航使用的颜色相同 不然颜色过渡就会有问题 -->
		<uni-nav-bar 
			left-image="back"
			right-text="菜单" 
			title="预加载loading" 
			:color="color" 
			:background-color="backgroud"
			fixed="true"
			@clickLeft="back"
			@clickRight="menu"
			status-bar="true"
			>
		</uni-nav-bar>
		<view class="image">
			<image src="@/static/mescroll/xiaojiejie2.jpg" mode=""></image>
		</view>
		<view style="height: 100rpx;text-align: center;" v-for="(a,i) in 20" :key="i">
			我是一条数据哟
		</view>
	</view>
</template>

<script>
	import uniNavBar from "@/components/uni-nav-bar/uni-nav-bar.vue"
	export default{
		components:{
			uniNavBar
		},
		data(){
			return{
				backgroud:'rgba(255,255,255,0)',
				color:'rgba(0,0,0,0)',
				show:false,
				time:'.3s',
			}
		},
		mounted() {
		},
		methods:{
			back(){
				uni.navigateBack()
			},
			menu(){
				console.log("点击了菜单")
			}
			
		},
		onPageScroll(e){
			if (e.scrollTop) {
				this.backgroud = `rgba(255, 255, 255,${e.scrollTop / (e.scrollTop + 43.88)})`;
				this.color = `rgba(0, 0, 0,${e.scrollTop / (e.scrollTop + 43.88)})`
			}else if(e.scrollTop || e.scrollTop < 5){  // 这里<5 防止监听0 失败
				this.backgroud = 'transparent'
				this.color = 'transparent'
			}
		}
		
	}
</script>

<style>
	page{
		background: #FFFFFF;
	}
	.image{
		width: 100%;
		height: 700rpx;
		margin-top: -88rpx;
	}
	.image image{
		width: 100%;
		height: 100%;
	}
</style>
